import './App.css';
import React,{Component} from "react";
import * as echarts from 'echarts';
import 'whatwg-fetch'

export default class Router extends Component{
    componentDidMount() {
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
            title: {
                text: '平台每日http总访问量统计'
            },
            tooltip: {},
            legend: {
                data: []
            },
            xAxis: {
                data:[]
            },
            yAxis: {},
            series: [{
                name: '访问量',
                type: 'bar',
                data: []
            }]

        });
            // myChart.showLoading();

        fetch("/allHttp", {
            method: 'POST',
            headers: {
                'X-AURORA-TOKEN': 'a525f3c52d134800b965139c1d3306ae'
            },
            mode: 'cors',
            cache: 'default',
            dataType: 'json',
        }).then(res => {
            return res.json();
        }).then(res => {

            var bb = res.content //获取content数组
            // console.log(bb)//数组名bb
            // const times =[];
            const timeList = [];
            const numList = [];
            bb.forEach((item,index,arr)=>{
                // console.log(item)
                // console.log(index)
                // console.log(arr)
                timeList.push(item.statistics_day)//时间
                numList.push(item.api_visits_count_num)//访问量
                // console.log(timeList)
                // console.log(numList)
            })
                myChart.setOption({
                    title: {
                        text: '平台每日http总访问量统计'
                    },
                    tooltip: {},
                    legend: {
                        data: []
                    },
                    xAxis: {
                        type:'category',
                        data: timeList
                    },
                    yAxis:{
                        type: 'value'
                    },
                    series: [{
                        name: "访问量",
                        data: numList,
                        type:'bar'
                    }]
                });
        })

    }
    render() {
        return (
            <div id="main" style={{width: "100%", height: 500}}>
            </div>
        )
    }
}
